// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import type { State } from 'store';
// import type { UserData } from 'store/modules/user';
import { BaseActions } from 'store/actionCreators';
import UserMenuList from 'components/Header/UserMenuList';
import storage, { keys } from 'lib/storage';

type Props = {
    username: string
};

class UserMenuListContainer extends Component<Props> {
    onClick = () => {
        BaseActions.hideUserMenu();
    };
    onClickOutside = () => {
        BaseActions.hideUserMenu();
    };
    onLogout = async () => {
        window.history.path = '/';
        storage.remove(keys.name);
        storage.remove(keys.auth);
        return null;
    };
    render() {
        const { onClick, onLogout, onClickOutside, user } = this;
        const { username, userMenu } = this.props;
        if (userMenu.isCollapse) return null;
        if (!user) return null;
        return (
            <UserMenuList
                onLogout={onLogout}
                onClick={onClick}
                onClickOutside={onClickOutside}
                username={username}
            />
        );
    }
}
// 把store导入Pros
const mapStatetoProps = ({ auth, base }: State) => {
    return {
        user: auth.user,
        username: auth.user && auth.user.name,
        userMenu: base && base.userMenu
    };
};

const mapDispatchtoProps = () => ({});
export default connect(
    mapStatetoProps,
    mapDispatchtoProps
)(UserMenuListContainer);
